<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>公告配置</title>
	<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index1.css">
	<link rel="stylesheet" href="../../lib/vxe-table/index.css">
	<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
	<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../static/css/skins.css">
	<!-- <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js" type="text/javascript"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> -->
	<script type="text/javascript" src="../../lib/vue/vue.js"></script>
	<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
	<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
	<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
	<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/webApi.js"></script>
	<script type="text/javascript" src="../../static/js/tool.js"></script>
	<style type="text/css">
	    .mytable-style .vxe-body--column.col-red {
	              color: limegreen;
	    }
	    .mytable-style .vxe-body--column.col-orange {
	              color: red;
	    }
		.mytable-style .vxe-body--column.col-gray {
		          color: rgba(0,0,0,0.3);
		}
		/*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
		html,
		body,
		#app,
		.el-container {
			/*设置内部填充为0，几个布局元素之间没有间距*/
			padding: 0px;
			/*外部间距也是如此设置*/
			margin: 0px;
			/*统一设置高度为100%*/
			height: 100%;
		}
		.el-main {
			padding: 0px;
			height: 100%;
		}
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
		[v-cloak] {
			display: none;
		}
	</style>
</head>

<body class="skin-blue">
	<!-- <div id="div1"></div> -->
	<!-- <script type="text/javascript">
	    const E = window.wangEditor
	    const editor = new E('#div1')
	    editor.create()
	</script> -->
	<el-container id="app" v-cloak>
		<el-main>
			<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
				size="mini" style="height: 35px;" @submit.native.prevent>
				<el-form-item label="标题">
					<el-input v-model="queryData.ntcName" placeholder="请输入关键字"></el-input>
				</el-form-item>
				<el-form-item>
				    <el-button size="mini" icon="el-icon-search" @click="searchEvent">查询</el-button>
				    <el-button size="mini" icon="el-icon-refresh-right" @click="searchEventA">重置</el-button>
				</el-form-item>
			</el-form>
			<vxe-grid border class="mytable-style"  :cell-class-name="cellClassName" ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
				:height="tableHeight" size="mini" :checkbox-config="tableRadio" :pager-config="tablePage"
				:data="tableData" :loading="dataLoading" :toolbar="tableToolbar" @page-change="handlePageChange"
				:edit-config="{trigger:'click', mode:'row'}" :header-cell-style="{'text-align':'center'}"
				@cell-dblclick="cellDBLClickEvent" @toolbar-button-click="toolbarButtonClickEvent">
				<vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
				<vxe-table-column field="id" title="公告ID" width="80" align="right">
				</vxe-table-column>
				<vxe-table-column field="title" title="标题" width="240" align="left">
				</vxe-table-column>
				<vxe-table-column field="type" title="类型" width="100" align="left">
					<template v-slot="{ row }">
						{{formatterMenuType(row.type)}}
					</template>
				</vxe-table-column>
				<vxe-table-column field="content" title="内容" width="550" align="left">
				</vxe-table-column>
				<vxe-table-column field="endDate" title="到期时间" width="100" align="right">
				</vxe-table-column>
				<vxe-table-column field="stateName" title="状态" width="100" align="center">
				</vxe-table-column>
				<vxe-table-column field="createUser" title="创建人" width="130" align="left">
				</vxe-table-column>
				<vxe-table-column field="createTime" title="创建日期" width="150" align="right" :formatter="formatDate">
				</vxe-table-column>
				<vxe-table-column field="state" title="状态" width="180" align="center" :visible="visible">
				</vxe-table-column>
				<vxe-table-column title="操作" width="180" align="center" show-overflow>
					<template v-slot="{ row }">
						<template v-if="row.state=='1'">
							<vxe-button type="text" icon="el-icon-upload2" @click="statusEvent(row,5)" title="发布">发布
							</vxe-button>
						</template>
						<template v-if="row.state=='5'">
							<vxe-button type="text" icon="el-icon-video-pause" :visible="visible"
								@click="statusEvent(row,11)" title="停用">停用</vxe-button>
						</template>
					</template>
				</vxe-table-column>
			</vxe-grid>
		</el-main>
		<vxe-modal ref="xModal" v-model="showEdit" :title="selectRow" width="800" :loading="submitLoading" resize
			destroy-on-close>
			<el-form :model="form" :rules="formRules" ref="formData" label-width="120px" label-position="right"
				size="mini">
				<el-form-item label="公告标题：" prop="title">
					<el-input v-model="form.title" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="截止时间：" prop="endDate">
					<el-date-picker style="width: 100%;" v-model="form.endDate" type="date" placeholder="选择截至日期"
						default-value="" value-format="yyyy-MM-dd">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="业务分类：" prop="cation" style="float: left; margin: 0px 0px 0px 0px;">
					<el-cascader v-model="form.cation" :options="options"
						:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:false,emitPath:false }" clearable></el-cascader>
				</el-form-item>
				<el-form-item label="公告类型：" prop="type">
					<el-radio-group v-model="form.type" @change="typeChange">
						<el-radio :label="1" v-cloak>纯公告</el-radio>
						<el-radio :label="2" v-cloak>链接菜单</el-radio>
					</el-radio-group>
				</el-form-item>
				<p style="color:red;margin-left:38px; margin: 0px 0px 20px 38px;">部门和角色默认为所有人均可查看</p>
				<el-form-item label="通知部门：" prop="depart" style="float: left; margin: 0px 0px 0px 0px;">
					<el-cascader v-model="form.depart" :options="departOptions"
						:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:true }" clearable></el-cascader>
				</el-form-item>
				<el-form-item label="通知角色：" prop="role">
					<el-cascader v-model="form.role" :options="roleOptions"
						:props="{ expandTrigger: 'hover',checkStrictly:true,multiple:true }" clearable></el-cascader>
				</el-form-item>
				<el-form-item v-if="menuShow" label="链接菜单：">
					<el-cascader style = "width: 72%; margin: 0px 0px 10px 0px;" v-model="muentext" :options="menuOptions"
						:props="{ expandTrigger: 'hover',checkStrictly:false,multiple:false,emitPath:false }" clearable
						filterable style="width:100%" @change="menuChange">
					</el-cascader>
				</el-form-item>
				<el-form-item label="内容：" prop="content">
				<el-input :rows="5" v-model="form.content" type="textarea" maxlength="500" show-word-limit></el-input>
				<!-- <div id="div1"></div> -->
				</el-form-item>
				<el-form-item style="text-align: right;">
					<el-button type="primary" icon="el-icon-folder" @click="submitEvent()" :disabled="disabled" v-cloak>
						保存
					</el-button>
					<el-button type="warning" icon="el-icon-refresh" @click="resetEvent()" v-cloak>重置
					</el-button>
					<el-button type="warning" icon="el-icon-switch-button" @click="closeEvent()" v-cloak>退出
					</el-button>
				</el-form-item>
			</el-form>
		</vxe-modal>

	</el-container>
</body>
<script type="text/javascript">
	// const E = window.wangEditor
	// const editor = new E('#div1')
	// editor.create();
	window.onload = function () {
		var main = {
			data() {
				return {
					fileList: [],
					muentext: '',
					menuShow: false,
					menuOptions: [],
					disabled: false,
					selectRow: '',
					submitLoading: false,
					showEdit: false,
					options: [],
					departOptions: [],
					roleOptions: [],
					form: {
						id: '',
						title: '',
						type: '',
						content: '',
						endDate: '',
						menuId: '',
						cation: '',
						depart: [],
						role: []
					},
					formRules: {
						title: [{
							required: true,
							message: '请输入公告标题'
						}],
						type: [{
							required: true,
							message: '请选择公告类型'
						}],
						content: [{
							required: true,
							message: '请输入公告内容'
						}],
						enDeat: [{
							required: true,
							message: '请选择截至日期'
						}]
					},
					menuTypeOptions: [{
						value: "1",
						label: '纯公告'
					}, {
						value: "2",
						label: '链接菜单'
					}],
					visible: false,
					ntcTitle: '',
					dataLoading: false,
					tableHeight: '100%',
					tableRadio: {
						trigger: 'row',
						highlight: true
					},
					tableData: [],
					tablePage: {
						perfect: true,
						total: 0,
						currentPage: 1,
						pageSize: 30,
						align: 'left',
						pageSizes: [30, 50, 100, 200],
						layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
							'Total'
						],
					},
					queryData: {
						ntcName: ""
					},
					tableToolbar: {
						id: 'toolbar',
						size: 'mini',
						perfect: true,
						buttons: [{
							code: 'btnAdd',
							name: '新增公告',
							status: 'perfect',
							icon: 'el-icon-plus vxe-primary-color'
						}]
					},
				}
			},
			created() {
				this.getCurrentMonthFirst();
				this.getBusTypeList();
				this.getDepartList();
				this.getRoleList();
				this.getNoticeList();
				this.getMenuOptions();
				this.getBtn();
			},
			mounted() {
				this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 1;
			},
			methods: {
				searchEvent() {
						this.getNoticeList();
				},
				searchEventA() {
						this.queryData.ntcName = "";
						this.getNoticeList();
				},
				// 判断禁用启用状态的文字颜色
				cellClassName ({ row, rowIndex, column, columnIndex }) {
				    if (column.property === 'stateName') {
				          if (row.state=='1') {
				            return 'col-orange '
				         } else if (row.state=='5') {
				             return 'col-red'
				        }else if (row.state=='11'){
							return 'col-gray'
						}
				    }
				 },
				getCurrentMonthFirst() {
					var date = new Date()
					var month = parseInt(date.getMonth() + 1)
					var day = date.getDate()
					if (month < 10) month = 1 + month
					if (day < 10) day = '0' + day
					this.form.endDate = date.getFullYear() + '-' + month + '-' + day
				},
				getTreeData(data) {
					for (let i = 0; i < data.length; i++) {
						if (data[i].children.length < 1) {
							// children若为空数组，则将children设为undefined
							data[i].children = undefined;
						} else {
							// children若不为空数组，则继续 递归调用 本方法
							this.getTreeData(data[i].children);
						}
					}
					return data;
				},
				getBtn() {
					this.tableToolbar.buttons = []
					let bts = Tool.getButton()
					let btns = []
					this.tableToolbar.buttons = btns.concat(bts)
				},
				//分页
				handlePageChange({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.getNoticeList()
				},
				getMenuOptions() {
					var signInputParms = {}
					var object = this;
					webApi("/menu/getMenuOptions", "post", signInputParms, function (data) {
						object.menuOptions = object.getTreeData(data.data);
					}, function (data) {});
				},
				submitEvent() {
					let that = this;
					if (that.form.type == "") {
						that.$message({
							message: "请选择公告类型",
							type: 'error',
							center: true
						});
					}
					else if(that.form.title==""){
						that.$message({
							message: "请选择公告标题",
							type: 'error',
							center: true
					})
				}
				var realDepart=[];
				var realRole=[];
				if(that.form.depart.length>0){
					for(let i=0;i<that.form.depart.length;i++){
						realDepart.push(that.form.depart[i][that.form.depart[i].length-1]);
					}
				}
				if(that.form.role.length>0){
					for(let i=0;i<that.form.role.length;i++){
						realRole.push(that.form.role[i][that.form.role[i].length-1]);
					}
				}
					let params = {
						id: that.form.id,
						title: that.form.title,
						type: that.form.type,
						content: that.form.content,
						endDate: that.form.endDate,
						menuId: that.form.menuId,
						businessType: that.form.cation,
						departs: realDepart.toString(),
						roles: realRole.toString(),
						fullDeparts : JSON.stringify(that.form.depart),
						fullRoles : JSON.stringify(that.form.role)
					}
					// console.log(params);
					// return false;
					that.submitLoading = true;
					webApi('/notice/save', 'post', params, function (data) {
						if (data.code == 200) {
							that.submitLoading = false;
							that.getNoticeList();
							that.$message({
								message: data.msg,
								type: 'success',
								center: true
							});
							that.showEdit = false;
						} else {
							that.$message({
								message: data.msg,
								type: 'error',
								center: true
							});
							that.submitLoading = false;
						}
					}, function (msg) {})
				},
				resetEvent() {
					this.form.id = '';
					this.form.title = '';
					this.form.type = '';
					this.form.content = '';
					this.form.endDate = '';
					this.form.menuId = '';
					this.muentext = '';
				},
				typeChange(e) {
					if (e == 2) {
						this.menuShow = true;
					} else if (e == 1) {
						this.menuShow = false;
						this.muentext = "";
						this.form.menuId = "";
					}
				},
				menuChange(e) {
					console.log(e);
					this.form.menuId = e;
				},
				getNoticeList() {
					var object = this;
					object.dataLoading = true
					webApi('/notice/NoticeList', 'post', {
						keyword: object.queryData.ntcName,
						page: object.tablePage.currentPage,
						rows: object.tablePage.pageSize
					}, function (data) {
						object.tableData = data.data.rows;
						object.tablePage.total = data.data.total;
						object.dataLoading = false;
						// object.getMenuOptions();
					}, function (msg) {})
				},
				getBusTypeList() {
					var that = this;
					that.dataLoading = true
					webApi('/dict/getDictDetailTreeList', 'post', {
						dictId: 1
					}, function (data) {
						that.options = data.data;
						that.dataLoading = false;
					}, function (msg) {})
				},
				getDepartList() {
					var that = this;
					that.dataLoading = true
					webApi('/notice/getDepartTreeList', 'post', {
						dictId: 1
					}, function (data) {
						that.departOptions = data.data;
						that.dataLoading = false;
					}, function (msg) {})
				},
				getRoleList() {
					var that = this;
					that.dataLoading = true
					webApi('/notice/getRoleTreeList', 'post', {
						dictId: 1
					}, function (data) {
						that.roleOptions = data.data;
						that.dataLoading = false;
					}, function (msg) {})
				},
				Notice(num, item) {
					this.resetEvent();
					if (num == 0) {
						this.selectRow = "新增&保存";
						this.showEdit = true;
						this.form.cation = '';
						this.form.depart = '';
						this.form.role = '';
					} else if (num == 1) {
						//获取默认值赋值进模态框中
						this.selectRow = "编辑&保存";
						this.form.id = item.id;
						this.form.title = item.title;
						this.form.cation = item.businessType;
						this.form.depart = JSON.parse(item.departId);
						this.form.role = JSON.parse(item.roleId);
						this.form.type = item.type;
						this.form.content = item.content;
						this.form.endDate = item.endDate;
						this.form.menuId = item.menuId;
						if (item.type == "1") {
							this.form.type = 1;
							this.menuShow = false;
						} else if (item.type == "2") {
							this.form.type = 2;
							this.menuShow = true;
							this.form.menuId = item.menuId;
							this.muentext = item.menuId;
						}
						this.showEdit = true;
					}
				},
				statusEvent(row, states) {
					if (states != 11) {
						this.$XModal.confirm('您确定要启用该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = {
									id: row.id,
									state: states
								};
								var object = this;
								webApi("/notice/NoticeUpd", "post", params, function (data) {
									if (data.code == 200) {
										object.getNoticeList();
										object.$message({
											message: "已启用该条数据",
											type: 'success',
											center: true
										});
										object.showEdit = false;
									} else {
										object.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
								}, function (data) {});
								this.submitLoading = false;
							}
						});
					} else if (states == 11) {
						this.$XModal.confirm('您确定要停用该数据?').then(type => {
							if (type === 'confirm') {
								this.submitLoading = true;
								let params = {
									id: row.id,
									state: states
								};
								var object = this;
								webApi("/notice/NoticeUpd", "post", params, function (data) {
									if (data.code == 200) {
										object.getNoticeList();
										object.$message({
											message: "已停用该条数据",
											type: 'error',
											center: true
										});
										object.showEdit = false;
									} else {
										object.$message({
											message: data.msg,
											type: 'error',
											center: true
										});
									}
								}, function (data) {});
								this.submitLoading = false;
							}
						});
					}
				},
				removeEvent(row) {
					this.$XModal.confirm('您确定要删除该数据?').then(type => {
						if (type === 'confirm') {
							this.submitLoading = true;
							let ids = ""
							row.forEach(item => {
								ids += item.id + ","
							});
							let params = {
								id: ids
							};
							var object = this;
							webApi("/notice/delete", "post", params, function (data) {
								if (data.code == 200) {
									object.getNoticeList();
									object.$message({
										message: data.msg,
										type: 'success',
										center: true
									});
									object.showEdit = false;
								} else {
									object.$message({
										message: data.msg,
										type: 'error',
										center: true
									});
								}
							}, function (data) {});
							this.submitLoading = false;
						}
					});
				},
				formatDate({
					cellValue
				}) {
					return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
				},
				searchEvent(acType) {
					var object = this;
					if (acType == 0) {
						this.queryData.ntcName = ""
						// object.$refs[keyword].resetFields();
					} else {
						this.tablePage.currentPage = 1
						this.getNoticeList()
					}
				},
				formatterMenuType(cellValue) {
					let i = this.menuTypeOptions.findIndex((item) => item.value == cellValue)
					return this.menuTypeOptions[i].label ? this.menuTypeOptions[i].label : '';
				},
				checkColumnMethod({
					column
				}) {
					if (['ntcName'].includes(column.property)) {
						return false
					}
					return true
				},
				closeEvent() {
					this.showEdit = false;
				},
				cellDBLClickEvent({
					row
				}) {
					this.Notice(1, row);
				},
				toolbarButtonClickEvent({
					code
				}, event) {
					switch (code) {
						case 'reset':
							this.searchEvent(0)
							break;
						case 'search':
							this.searchEvent(1)
							break;
						case 'btnInsert':
							this.Notice(0);
							break;
						case 'btnUpdate':
							if (this.$refs.xGrid.getCheckboxRecords().length == 1) {
								let row = this.$refs.xGrid.getCheckboxRecords()
								this.Notice(1, row[0]);
							} else if (this.$refs.xGrid.getCheckboxRecords().length > 1) {
								this.$message({
									message: "数据大于一条，无法修改",
									type: 'warning',
									center: true
								});
							} else {
								this.$message({
									message: "请选择一行数据",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnDelete':
							var row = this.$refs.xGrid.getCheckboxRecords();
							console.log(row)
							if (row.length > 0) {
								this.removeEvent(row);
							} else {
								this.$message({
									message: "请选择需要删除的数据行",
									type: 'warning',
									center: true
								});
							}
							break;
						case 'btnExport':
							this.$refs.xGrid.exportData({
								filename: '菜单列表',
								sheetName: 'Sheet1',
								type: 'xlsx'
							});
							break;
					}
				},
			},
		};
		var vue = Vue.extend(main);
		new vue().$mount('#app');
	}
</script>

</html>